<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('志愿者统计')" />
    <style>
        .echarts-height-300 {
            height: 300px;
        }

        .echarts-height-350 {
            height: 350px;
        }

        .echarts-height-400 {
            height: 400px;
        }

        .fa-border-radius {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<!--设置整体背景为灰色-->
<body class="gray-bg">
    <div class="container-div mt20">
        <!--用栅格系统将整个页面看做一行-->
        <div class="row">
            <!--整个页面左部区域列col-sm-8，用于存放志愿者状态、年龄分布、文化程度和例年增长趋势统计图表-->
            <div class="col-sm-8">
                <!--志愿者状态数据统计存放位置，col-sm-11用来设置该区域的宽度-->
                <div class="col-sm-11">
                    <!--将整个志愿者状态区域，用栅格系统分为三列，每列占col-sm-4；且设置左右外边距均为5px（ml5、mr5）-->
                    <div class="row ibox mr5 ml5">
                        <!--志愿者状态区域标题-->
                        <div class="ibox-title">
                            <h4>志愿者状态</h4>
                        </div>
                        <!--志愿者状态区域左边部分：显示应届生人数区域-->
                        <div class="col-sm-4">
                            <div>
                                <!--设置应届生区域背景（navy-bg：绿色）高度（message-input：90px）以及其边框、边距属性（widget）-->
                                <div class="navy-bg message-input widget">
                                    <!--设置应届生区域图标容器，背景（white-bg：白色）、上外边距（mt10：10px）、
                                    边框圆形（fa-border-radius），且该容器区域左浮动（pull-left)-->
                                    <div class="white-bg mt10 pull-left fa-border-radius">
                                        <!--设置图标样式，图标fa fa-folder-open-o，图标大小（fa-2x：2em）、颜色（text-success：蓝色）、
                                        左边距（m-l-sm：10px）、上边距（mt10px）-->
                                        <i class="fa fa-folder-open-o fa-2x text-success m-l-sm mt10" ></i>
                                    </div>
                                    <!--设置应届生区域数据存储容器、左外边距（ml5：5px）、
                                    宽度50%（issue-info），且该容器区域左浮动（pull-left)-->
                                    <div class="pull-left ml5 issue-info">
                                        <!--应届生区域标题-->
                                        <h4>应届生</h4>
                                        <!--用于存储应届生区域数据，并设置做外边距（m-l：15px）-->
                                        <p class="m-l">
                                            <!--应届生人数，在jquery中通过类选择器$.(".volunteer-status:eq(0)")定位到该标签，
                                            并将从后台获取的应届生人数赋值到该标签的内容中-->
                                            <span class="h4 volunteer-status"></span>
                                            <!--应届生数据单位，设置其右浮动（pull-right），字体大小（lead：21px）-->
                                            <span class="pull-right lead">人</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--志愿者状态区域中间部分：显示往届生人数区域-->
                        <div class="col-sm-4">
                            <div>
                                <!--设置往届生区域背景（yellow-bg：黄色）高度（message-input：90px）以及其边框、边距属性（widget）-->
                                <div class="yellow-bg message-input widget">
                                    <!--设置往届生区域图标容器，背景（white-bg：白色）、上外边距（mt10：10px）、
                                    边框圆形（fa-border-radius），且该容器区域左浮动（pull-left)-->
                                    <div class="white-bg mt10 pull-left fa-border-radius">
                                        <!--设置图标样式，图标fa fa-folder-open-o，图标大小（fa-2x：2em）、颜色（text-success：蓝色）、
                                       左边距（m-l-sm：10px）、上边距（mt10px）-->
                                        <i class="fa fa-folder-open-o fa-2x text-success m-l-sm mt10" ></i>
                                    </div>
                                    <!--设置往届生区域数据存储容器、左外边距（ml5：5px）、
                                   宽度50%（issue-info），且该容器区域左浮动（pull-left)-->
                                    <div class="pull-left ml5 issue-info">
                                        <!--往届生区域标题-->
                                        <h4>往届生</h4>
                                        <!--用于存储应届生区域数据，并设置做外边距（m-l：15px）-->
                                        <p class="m-l">
                                            <!--往届生人数，在jquery中通过类选择器$.(".volunteer-status:eq(1)")定位到该标签，
                                            并将从后台获取的往届生人数赋值到该标签的内容中-->
                                            <span class="h4 volunteer-status"></span>
                                            <!--往届生数据单位，设置其右浮动（pull-right），字体大小（lead：21px）-->
                                            <span class="pull-right lead">人</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--志愿者状态区域右边部分：显示被列入黑名单人数区域-->
                        <div class="col-sm-4">
                            <div>
                                <!--设置黑名单区域背景（red-bg：黄色）高度（message-input：90px）以及其边框、边距属性（widget）-->
                                <div class="red-bg message-input widget">
                                    <!--设置黑名单区域图标容器，背景（white-bg：白色）、上外边距（mt10：10px）、
                                    边框圆形（fa-border-radius），且该容器区域左浮动（pull-left)-->
                                    <div class="white-bg mt10 pull-left fa-border-radius">
                                        <!--设置图标样式，图标fa fa-star，图标大小（fa-2x：2em）、颜色（text-navy：绿色）、
                                       左边距（m-l-sm：10px）、上边距（mt10px）-->
                                        <i class="fa fa-star fa-2x text-navy m-l-sm mt10" ></i>
                                    </div>
                                    <!--设置黑名单区域数据存储容器、左外边距（ml5：5px）、
                                   宽度50%（issue-info），且该容器区域左浮动（pull-left)-->
                                    <div class="pull-left ml5 issue-info">
                                        <!--黑名单区域标题-->
                                        <h4>黑名单</h4>
                                        <!--用于存储黑名单区域数据，并设置做外边距（m-l：15px）-->
                                        <p class="m-l">
                                            <!--往届生人数，在jquery中通过类选择器$.(".volunteer-status:eq(2)")定位到该标签，
                                            并将从后台获取的被列入黑名单人数赋值到该标签的内容中-->
                                            <span class="h4 volunteer-status"></span>
                                            <!--黑名单数据单位，设置其右浮动（pull-right），字体大小（lead：21px）-->
                                            <span class="pull-right lead">人</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--年龄分布以及文化程度数据统计存放位置，col-sm-11用来设置该区域的宽度-->
                <div class="col-sm-11">
                    <!--将整个区域，用栅格系统分为两列列，每列占col-sm-6）-->
                    <div class="row">
                        <!--志愿者年龄分布统计数据图表存放位置，位于区域左边-->
                        <div class="col-sm-6">
                            <!--设置志愿者年龄分布数据图表高度（echarts-height-300：300px），并设置id为volunteerAgeDistribution，
                            在js中通过该id定位到该容器，向该容器中添加图表-->
                            <div class="ibox echarts-height-300" id="volunteerAgeDistribution"></div>
                        </div>
                        <!--志愿者文化程度统计数据图表存放位置，位于区域右边-->
                        <div class="col-sm-6">
                            <!--设置志愿者文化程度数据图表高度（echarts-height-300：300px），并设置id为volunteerDegreeDistribution，
                            在js中通过该id定位到该容器，向该容器中添加图表-->
                            <div class="ibox echarts-height-300" id="volunteerDegreeDistribution"></div>
                        </div>
                    </div>
                </div>
                <!--例年增长趋势数据统计存放位置，col-sm-11用来设置该区域的宽度-->
                <div class="col-sm-11">
                    <!--采用栅格系统-->
                    <div class="row">
                        <!--将整行设置用于存储例年增长趋势数据图表-->
                        <div class="col-sm-12">
                            <!--设置例年增长趋势数据表高度（echarts-height-350：350px），并设置id为volunteerGrowthTrend，
                            在js中通过该id定位到该容器，向该容器中添加图表-->
                            <div class="ibox echarts-height-350" id="volunteerGrowthTrend"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--整个页面右部区域列col-sm-4，用于所在学院分布、所在地区分布统计图表-->
            <div class="col-sm-4">
                <!--采用栅格系统，划分出整个页面右边区域的一行-->
                <div class="row">
                    <!--将整行设置用于志愿者所在学院分布数据图表-->
                    <div class="col-sm-12">
                        <!--设置志愿者所在学院分布数据表高度（echarts-height-400：400px），并设置id为collegeDistribution，
                            在js中通过该id定位到该容器，向该容器中添加图表-->
                        <div class="ibox echarts-height-400" id="volunteerCollegeDistribution"></div>
                    </div>
                </div>
                <!--采用栅格系统，划分出整个页面右边区域的一行-->
                <div class="row">
                    <!--将整行设置用于志愿者所在地区分布数据图表-->
                    <div class="col-sm-12" >
                        <!--设置志愿者所在地区数据表高度（echarts-height-400：400px），并设置id为localDistribution，
                            在js中通过该id定位到该容器，向该容器中添加图表-->
                        <div class="ibox echarts-height-400" id="volunteerLocalDistribution"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <!--导入echarts-all.js，用于绘制数据图表-->
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
    <!--导入自己编写的echarts容器样式函数-->
    <script th:src="@{/js/myEcharts.js}"></script>
    <script th:inline="javascript">

        //访问后台接口前缀
        var prefix = "/vtsp/statistic/volunteerstatistic";

        //首次打开页面时访问数据
        /**
         * 通过接口/getCollegeDistribution来调用后端方法获取志愿者所在学院分布的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerCollegeDistribution",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                treeChart("volunteerCollegeDistribution","所在学院分布",data);
            },
            /**
             * 获取结果失败时执行
             */
            error:function ()
            {
                treeChart("volunteerCollegeDistribution","暂无数据",[""]);
            }
        });

        /**
         * 通过接口/getLocalDistribution来调用后端方法获取志愿者所在地区分布的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerLocalDistribution",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                treeChart("volunteerLocalDistribution","所在地区分布",data);
            },
            error:function ()
            {
                treeChart("volunteerLocalDistribution","暂无数据",[""]);
            }
        })

        /**
         * 通过接口/getDegreeDistribution来调用后端方法获取志愿者文化程度的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerDegreeDistribution",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                //categoryList用于存储志愿者文化程度的类目数据
                let categoryList = ["博士研究生","硕士研究生","本科生"]

                horizontalBarChart("volunteerDegreeDistribution","文化程度",categoryList,data);
            },
            error:function ()
            {
                treeChart("volunteerDegreeDistribution","暂无数据",[""],[""]);
            }
        });

        /**
         * 通过接口/getPersonGrowthTrend来调用后端方法获取志愿者例年增长趋势的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerGrowthTrend",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                //dateList用于存储例年的类目数据
                let dateList = [];
                //numberList用于存储每年志愿者增加的人数
                let numberList = [];
                //循环从后端获取的数据结果将其添加到类目数据列表和志愿者人数列表中
                for (let i=0;i<data.length;i++)
                {
                    dateList.push(data[i].date);
                    numberList.push(data[i].number);
                }
                lineChart("volunteerGrowthTrend","例年增长趋势",dateList,numberList);
            },
            error:function ()
            {
                treeChart("volunteerGrowthTrend","暂无数据",[""],[""]);
            }
        });

        /**
         * 通过接口/getAgeDistribution来调用后端方法获取志愿者年龄分布的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerAgeDistribution",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                //ageList用于存储志愿者年龄分布中的类目数据
                let ageList = [];
                //numberList用于存储志愿者各个年龄段的人数
                let numberList = [];
                //循环从后台获取的数据结果，将其添加到年龄段类目列表和志愿者人数列表中
                for (let i=0;i<data.length;i++)
                {
                    ageList.push(data[i].ageGroup);
                    numberList.push(data[i].number);
                }
                verticalBarChart("volunteerAgeDistribution","年龄分布",ageList,numberList);
            },
            error:function ()
            {
                treeChart("volunteerAgeDistribution","暂无数据",[""],[""]);
            }
        });


        /**
         * 通过接口/getVolunteerStatusDistribution来调用后端方法获取志愿者状态的相关数据，并将其添加到对应图表中
         */
        $.ajax
        ({
            url:prefix + "/getVolunteerStatusDistribution",
            type:"get",
            dataType:"json",
            /**
             * 当成功拿到结果时，将其拿到的数据添加到图表中
             *
             * @param data  从后端中获取的数据
             */
            success:function (data)
            {
                //循环从后端获取的数据，通过类选择器定位到对应区域标签将数据添加到对应区域标签中
                for (let i=0;i<data.length;i++)
                {
                    $(".volunteer-status:eq("+i+")").text(data[i]);
                }
            }
        });

        //创建websocket连接对象
        const ws = new WebSocket("ws://localhost/websocket/7");

        ws.onopen = function() {
            console.log("链接成功");
        }

        ws.onerror = function() {
            alert("调用接口出错或者已失效");
        }

        ws.onmessage = function(res) {
            //当数据发生改变时执行
            if (res.data.indexOf('链接成功') == -1) {
                //对与服务器传给客户端的消息进行全局匹配替换，将\"\[替换成[，\]\"替换成]
                let dataReplace = res.data.replace(/\"\[/g, '[');
                dataReplace = dataReplace.replace(/\]\"/g, ']');
                //将json字符串转化为JavaScript对象
                let data = JSON.parse(dataReplace);

                //各个学院志愿者人数
                treeChart("volunteerCollegeDistribution","所在学院分布",data["各个学院志愿者人数"]);

                //各个地区志愿者人数
                treeChart("volunteerLocalDistribution","所在地区分布",data["各个地区志愿者人数"]);

                //每年成为志愿者的人数
                //dateList用于存储例年的类目数据
                let dateList = [];
                //numberList用于存储每年志愿者增加的人数
                let numberList = [];
                //循环从后端获取的数据结果将其添加到类目数据列表和志愿者人数列表中
                for (let i=0;i<data["每年成为志愿者的人数"].length;i++)
                {
                    dateList.push(data["每年成为志愿者的人数"][i].date);
                    numberList.push(data["每年成为志愿者的人数"][i].number);
                }
                lineChart("volunteerGrowthTrend","例年增长趋势",dateList,numberList);


                //各个年龄段志愿者人数

                //ageList用于存储志愿者年龄分布中的类目数据
                let ageList = [];
                //numberList用于存储志愿者各个年龄段的人数
                let ageNumberList = [];
                //循环从后台获取的数据结果，将其添加到年龄段类目列表和志愿者人数列表中
                for (let i=0;i<data["各个年龄段志愿者"].length;i++)
                {
                    ageList.push(data["各个年龄段志愿者"][i].ageGroup);
                    ageNumberList.push(data["各个年龄段志愿者"][i].number);
                }
                verticalBarChart("volunteerAgeDistribution","年龄分布",ageList,ageNumberList);


                //志愿者状态分布
                //循环从后端获取的数据，通过类选择器定位到对应区域标签将数据添加到对应区域标签中
                for (let i=0;i<data["应届生，往届生志愿者人数"].length;i++)
                {
                    $(".volunteer-status:eq("+i+")").text(data["应届生，往届生志愿者人数"][i].number);
                }
                $(".volunteer-status:eq(2)").text(data["黑名单志愿者人数"]);


                //文化程度分布
                //categoryList用于存储志愿者文化程度的类目数据
                let categoryList = ["博士研究生","硕士研究生","本科生"];
                //degreeNumberList存储各个学历层次志愿者人数
                let degreeNumberList = [0,0,0];
                for (let i=0;i<data["各个学历志愿者"].length;i++)
                {
                    if(data["各个学历志愿者"][i].degree === "本科")
                    {
                        degreeNumberList[2] = data["各个学历志愿者"][i].number;
                    }
                    if(data["各个学历志愿者"][i].degree === "硕士研究生")
                    {
                        degreeNumberList[1] = data["各个学历志愿者"][i].number;
                    }
                    if(data["各个学历志愿者"][i].degree === "博士研究生")
                    {
                        degreeNumberList[0] = data["各个学历志愿者"][i].number;
                    }
                }
                horizontalBarChart("volunteerDegreeDistribution","文化程度",categoryList,degreeNumberList);

            }
        }

    </script>
</body>
</html>